<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>任务进展</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/footer.css" />
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
    <script src="../font/iconfont.js"></script>
    <style>
        h3 {
            font-size: .65rem;
        }

        #notice-1 {
            color: #fff;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid red;
            text-align: center;
            line-height: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light" id="header">
        <a class="aui-pull-left aui-btn" tapmode onclick="api.closeWin();">
            <span class="aui-iconfont aui-icon-left" style="color:#ff4285"></span>
        </a>
        <div class="aui-title" style="color:#ff4285">任务进展</div>

    </header>

    <div class="aui-tab" id="nav-1">
        <div class="aui-tab-item tapmode aui-active menu" onclick="fnSetNavMenuIndex(0);">申请中</div>
        <div class="aui-tab-item tapmode menu" onclick="fnSetNavMenuIndex(1);">待处理</div>
        <div class="aui-tab-item tapmode menu" onclick="fnSetNavMenuIndex(2);">可恢复</div>
        <div class="aui-tab-item tapmode menu" onclick="fnSetNavMenuIndex(3);">已完成</div>
    </div>
    <div id="nav-2" style="padding:10px 20px;background-color:#fff8d5">
        <h3><span id="notice-1">!</span> 淘宝物流显示已签收，先在淘宝上确认收货并评价</h3>
        <p style="font-size:.6rem">然后到试用网点击我已确认收货并评价(最近三个月的记录)</p>

    </div>
    <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item aui-active footer-tab" tapmode data-name="main" data-url="main.html">
            <svg class="icon svg-icon" aria-hidden="true">
      <use xlink:href="#iconsk-shouyeweixuanzhong">
      </svg>
            <!-- <svg class="icon svg-icon" aria-hidden="true">
        <use xlink:href="#iconsk-shouyexuanzhong">
      </svg> -->
            <div class="aui-bar-tab-label" style="color:black;">首页</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="task_center" data-url="task_center.html">
            <svg class="icon svg-icon" aria-hidden="true">
        <use xlink:href="#iconsk-mianfeishiyong">
      </svg>
            <!-- <svg class="icon svg-icon" aria-hidden="true">
    <use xlink:href="#iconsk-mianfeishiyongxuanzhong">
    </svg> -->
            <div class="aui-bar-tab-label">全部</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="member_friend" data-url="member_friend.html">

            <svg class="icon svg-icon" aria-hidden="true">
      <use xlink:href="#iconsk-fenxiangyoujiang-copy">
      </svg>
            <!-- <svg class="icon svg-icon" aria-hidden="true">
  <use xlink:href="#iconsk-fenxiangyoujiang">
  </svg> -->
            <div class="aui-bar-tab-label">邀请</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="task_ing" data-url="task_ing.html">

            <!-- <svg class="icon svg-icon" aria-hidden="true">
          <use xlink:href="#iconsk-zhibolishi-copy">
        </svg> -->
            <svg class="icon svg-icon" aria-hidden="true">
  <use xlink:href="#iconsk-zhibolishi">
  </svg>
            <div class="aui-bar-tab-label" style="color:#ff4285">试用进展</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="person_center" data-url="person_center.html">
            <svg class="icon svg-icon" aria-hidden="true">
        <use xlink:href="#iconsk-zhanghaoweixuanzhong">
      </svg>
            <!-- <svg class="icon svg-icon" aria-hidden="true">
      <use xlink:href="#iconsk-zhanghaoxuanzhong">
      </svg> -->
            <div class="aui-bar-tab-label">我的</div>
        </div>
    </footer>
    <div id="task-ing"></div>
    <!-- <footer class="aui-bar aui-bar-tab" id="footer">
        <div class="aui-bar-tab-item  footer-tab" tapmode data-name="main" data-url="main.html">
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-bar-tab-label">首页</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="task_center" data-url="task_center.html">
            <i class="aui-iconfont aui-icon-star"></i>
            <div class="aui-bar-tab-label">任务中心</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="member_friend" data-url="member_friend.html">

            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-bar-tab-label">邀请有奖</div>
        </div>
        <div class="aui-bar-tab-item footer-tab aui-active" tapmode data-name="task_ing" data-url="task_ing.html">
            <i class="aui-iconfont aui-icon-paper"></i>
            <div class="aui-bar-tab-label">任务进展</div>
        </div>
        <div class="aui-bar-tab-item footer-tab" tapmode data-name="person_center" data-url="person_center.html">
            <div class="aui-dot"></div>
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-bar-tab-label">我的</div>
        </div>
    </footer> -->
</body>
  <script id="task-" type="text/x-dot-template">

  </script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="./conf/config.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    apiready = function() {

        fnGetNum(); //获取头部信息上面的数量

        var header = $api.byId('header'); //获取header元素
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            style: 'dark',
            color: 'transparent'
        });
        var nav = $api.byId('nav-1'); //获取header元素
        var nav2 = $api.byId('nav-2'); //获取header元素
        var footer = $api.byId('footer'); //获取header元素
        headerH = $api.offset(header).h; //计算头部的高
        navH = $api.offset(nav).h; //计算导航栏的高
        navH2 = $api.offset(nav2).h; //计算导航栏的高
        footerH = $api.offset(footer).h; //计算头部的高
        menus = $api.domAll(nav, '.menu');
        initEventListenner(); //退出键添加提示框
        //fnOpenFrame();
        fnOpenFrameGroup();
        fnAddClick(); //底部导航栏

    };

    function fnGetNum() {

        var userInfo = $api.getStorage('userInfo');
        //获取数据app中存入的数据然后分配到模板中；
        if (userInfo) {
            var random = userInfo.random;
            var userid = userInfo.userid;
        } else {
            var random = "";
            var userid = "";
        }
        api.ajax({
            url: SITE_URL + 'index.php?m=api&c=appnew&a=task_ing',
            method: 'post',
            data: {
                values: {
                    userid: userid,
                    random: random,
                },
            }
        }, function(ret, err) {
            //alert(JSON.stringify(ret));
            if (ret.status == 1) {
                $("#nav-1").find("div").eq(0).html("申请中(" + ret.data.applying_num + ")");
                $("#nav-1").find("div").eq(1).html("待处理(" + ret.data.pending_num + ")");
                $("#nav-1").find("div").eq(2).html("可恢复(" + ret.data.recover_num + ")");

                if (ret.data.finish_num > 20) {
                    $("#nav-1").find("div").eq(3).html("已完成(20)");
                } else {
                    $("#nav-1").find("div").eq(3).html("已完成(" + ret.data.finish_num + ")");
                }

            }
        });
    }

    function fnOpenFrameGroup() {
        var frames = [];
        //把一个对象，添加到一个数组中
        for (var i = 0; i < menus.length; i++) {
            frames.push({
                name: 'task_ing_frame_' + i,
                url: 'task_ing_frame_' + i + '.html',
                pageParam: {
                    taskIngTypeIndex: i
                }
            });

        }


        api.openFrameGroup({
            name: 'taskIngFrameGroup',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH + navH + navH2,
                w: 'auto', //高度宽度，就是拉伸到屏幕右下角
                h: api.winHeight - footerH - headerH - navH - navH2,
            },
            index: 0,
            frames: frames
        }, function(ret, err) {
            fnSetNavMenuSelected(ret.index);
            fnGetNum();
        });


    }

    function fnSetNavMenuSelected(index_) {
        for (var i = 0; i < menus.length; i++) {
            if (index_ == i) {
                $api.addCls(menus[i], 'aui-active');
            } else {
                $api.removeCls(menus[i], 'aui-active');
            }
        }
    }

    function fnAddClick() {

        $("#footer .footer-tab").each(function() {
            $(this).click(function() {
                var name = $(this).attr("data-name");
                var url = $(this).attr("data-url");
                api.openWin({
                    name: name,
                    url: url,
                    opaque: true,
                    vScrollBarEnabled: false

                });
            });
        });

    }

    function fnOpenFrame() {
        var header = $api.byId('header');
        var headerH = $api.offset(header).h;
        var nav = $api.byId('nav-1');
        var navH = $api.offset(nav).h;
        var footer = $api.byId('footer');
        var footerH = $api.offset(footer).h;
        api.openFrameGroup({
            name: 'task_ing_group',
            rect: {
                x: 0,
                y: navH + headerH,
                w: 'auto',
                h: api.winHeight - footerH - navH - headerH
            },
            index: 2,
            frames: [{
                name: 'task_ing_frame_1',
                url: 'task_ing_frame_1.html',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_2',
                url: 'task_ing_frame_2',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_3',
                url: 'task_ing_frame_3.html',
                bgColor: '#fff'
            }, {
                name: 'task_ing_frame_4',
                url: 'task_ing_frame_4.html',
                bgColor: '#fff'
            }, ]
        }, function(ret, err) {
            var index = ret.index;
        });
    }

    function fnSetNavMenuIndex(index) {

        fnSetNavMenuSelected(index);
        if (index == 3) {

        }
        api.setFrameGroupIndex({
            name: 'taskIngFrameGroup',
            index: index,
            scroll: true
        });
    }

    function initEventListenner() {

        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWin();
        });
    };
    // function fnGetNum(){
    //   var userInfo = $api.getStorage('userInfo');
    //   //获取数据app中存入的数据然后分配到模板中；
    //   if(userInfo){
    //     var random = userInfo.random;
    //     var userid = userInfo.userid;
    //   }else{
    //     var random = "";
    //     var userid ="";
    //   }
    //   api.ajax({
    //       url: SITE_URL + 'index.php?m=api&c=appnew&a=task_ing',
    //       method: 'post',
    //       data: {
    //           values: {
    //               userid: userid,
    //               random: random,
    //
    //           },
    //
    //       }
    //   }, function(ret, err) {
    //     //alert(JSON.stringify(ret));
    //       if(ret.status==1){
    //       $("#nav-1").find("div").eq(0).html("申请中("+ret.data.applying_num+")");
    //       $("#nav-1").find("div").eq(1).html("待处理("+ret.data.pending_num+")");
    //       $("#nav-1").find("div").eq(2).html("可恢复("+ret.data.recover_num+")");
    //       $("#nav-1").find("div").eq(3).html("已完成("+ret.data.finish_num+")");
    //       }
    //   });
    // }
</script>

</html>
